<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精准询价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .mask-chang-type {
            background-color: #000;
            opacity: 0.6;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 20;
        }

        .content-chang-type {
            border-radius: 3px;
            padding: 0 4px 10px 10px;
            position: fixed;
            z-index: 30;
            width: 800px;
            left: 50%;
            margin-left: -400px;
            background-color: #fff;
            top: 10%;
        }

        .choose-title {
            line-height: 38px;
            padding-left: 10px;
        }
        .class-content{
            padding-left: 100px;
        }
        .class-content .class-level{
            width: 300px;
        }
    </style>
</head>
<body>
<div id="vue-box" v-cloak>
    <!--modal-->
    <div class="changetype-modal hide">
        <div class="mask-chang-type hide-mode"></div>
        <div class="content-chang-type">
            <div class="choose-title">请选择类目</div>
            <div class="class-content clearfix">
                <div class="class-level">
                    <div class="item" @click="getSList(index,item.name)" v-for="(item,index) in allList"><span>{{item.name}}</span><i
                            class="icon-sty1 icon_right1"></i></div>
                </div>
                <div class="class-level js-level2">
                    <div class="item" @click="getTList(index,item.name)" v-for="(item,index) in sList"><span>{{item.name}}</span><i
                            class="icon-sty1"></i></div>
                </div>
            </div>
            <div class="selected-text">您当前所选的类目：<span class="color-home">{{nameF}}  {{nameS?'>':''}}  {{nameS}}   {{nameT?'>':''}}  {{nameT}}</span>
            </div>
            <div class="text-c"><span class="btn-sty11 box-shadow-sty1 js-goRelease">确定</span></div>

        </div>
    </div>

    <!--<div id="header_01_html">
        <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
    </div>-->
    <div class="content-box">
        <!--<div id="left_tab_html">
            <iframe id="left_tab" src="left_tab.html?x=4&y=1" frameborder="0"></iframe>
        </div>-->
        <div class="right-box layui-form">
            <div class="friend-tips">
                <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
                <div class="info-list">1、请正确填写以下信息，我们将尽快为您审核！</div>
                <div class="info-list">2、*为必填项，同时提示您尽量完整，详细的填写以下信息，以提高广大配件人对您所发信息的关注度</div>
            </div>
            <div class="content-admin">

                <div class="title-toggle">
                    <div class="item active">管理企业基本信息</div>
                    <div class="item"><a href="change_linkSty.html">修改联系方式</a></div>
                </div>
                <div class="input-box1 sign-info" style="padding-left: 0;">
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">公司名称</span></div>
                        <div class="right-v">
                            <input type="text" class="layui-input" v-model="nameEnter">
                            <span class=""></span>
                        </div>
                    </div>
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">用户类型</span></div>
                        <div class="right-v">
                            <select name="" lay-verify="" class="js-personType">
                                <option value="">请选择</option>
                                <option value="0">厂家</option>
                                <option value="1">经销商</option>
                                <option value="2">修理厂/4s店/维修店</option>
                            </select>
                        </div>
                    </div>
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">主营行业</span></div>
                        <div class="right-v check-sty11 js-trade" style="width: 608px;">
                            <input type="checkbox" name="type" title="商用车配件" lay-skin="primary" value="0">
                            <input type="checkbox" name="type" title="乘用车配件" lay-skin="primary" value="1">
                            <input type="checkbox" name="type" title="工程机械车配件" lay-skin="primary" value="2">
                            <input type="checkbox" name="type" title="整车及专用车" lay-skin="primary" value="2">
                            <input type="checkbox" name="type" title="其他" lay-skin="primary" value="2">
                        </div>
                    </div>
                    <div class="li clearfix" style="margin-bottom: 10px;">
                        <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">主营产品</span></div>
                        <div class="detail-pic-text"><span class="js-picStr">填写主营产品，每个产品字数不能超过8个字</span><span
                                style="top: 1px;" class="">不能为空！</span></div>
                    </div>
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                        <div class="detail-pic-text wid-608 js-product">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                            <input type="text" class="layui-input wid-b24">
                        </div>
                    </div>

                    <div class="li clearfix" style="margin-bottom: 10px;">
                        <div class="left-k"><span class="col-ff4">*</span><span class="text-sty1">主营类目</span></div>
                        <div class="right-v">
                            <input type="text" class="layui-input js-allChange" data-type="1" readonly="readonly">
                            <span class=""></span>
                        </div>
                    </div>
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                        <div class="detail-pic-text wid-608 js-mainType1">

                        </div>
                    </div>

                    <div class="li clearfix" style="margin-bottom: 10px;">
                        <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">辅营类目</span></div>
                        <div class="right-v">
                            <input type="text" class="layui-input js-allChange" data-type="2" readonly="readonly">
                            <span class=""></span>
                        </div>
                    </div>
                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                        <div class="detail-pic-text wid-608 js-mainType2">

                        </div>
                    </div>

                    <div class="li clearfix">
                        <div class="left-k"><span class="col-ff4"></span><span class="text-sty1"></span></div>
                        <div class="detail-pic-text"><span class=""><span
                                class="release-btn1 js-submit">确认提交</span></span><span
                                style="top: 1px;" class=""></span></div>
                    </div>


                </div>
            </div>
        </div>
    </div>


</div>
<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
    var typeMain = '';
    $('.js-getType').on('click', '.item', function () {
        $(this).addClass('active1').siblings().removeClass('active1');
    })

    $('body').on('click', '.class-level .item', function () {
        var index = $(this).parent().index();
        $(this).addClass('active').siblings().removeClass('active');
        if (index < 2) {
            $(this).parent().next().find(".item").removeClass('active');
        }
    })
    $(document).on('click','.js-goRelease',function(){
        var name = $('.js-level2').find('.active span').html()
        if(!name){
            layer.msg('请选择2级')
            return
        }
        var hasName = true;
        if(typeMain==1){
            if($('.js-mainType1').find('.show-namesty')){
                $('.js-mainType1').find('.show-namesty').each(function(){
                    if($(this).find('span:first-child').html()==name){
                        $('.changetype-modal').addClass('hide');
                        hasName = false;
                        layer.msg('您已添加过');
                        return false
                    }else{
                        hasName = true
                    }
                })
            }
            if(hasName){
                var $el = '<div class="show-namesty"><span>'+name+'</span><span class="icon_close js-delMainpro1 del-sty1"></span></div>';
                $('.js-mainType1').append($el)
                $('.changetype-modal').addClass('hide');
            }
        }else{
            if($('.js-mainType2').find('.show-namesty')){
                $('.js-mainType2').find('.show-namesty').each(function(){
                    if($(this).find('span:first-child').html()==name){
                        $('.changetype-modal').addClass('hide');
                        hasName = false;
                        layer.msg('您已添加过');
                        return false
                    }else{
                        hasName = true
                    }
                })
            }
            if(hasName){
                var $el = '<div class="show-namesty"><span>'+name+'</span><span class="icon_close js-delMainpro1 del-sty1"></span></div>';
                $('.js-mainType2').append($el)
                $('.changetype-modal').addClass('hide');
            }
        }



    })
    $(document).on('click','.js-delMainpro1',function(){
        $(this).parents('.show-namesty').remove();
    })


    var postData = {
        name: '',
        userType: '',
        trade: [],
        product: [],
        mainType: [],
        assistType: [],
    }
    var storeId = localStorage.getItem("storeId");
    var app = new Vue({
        el: '#vue-box',
        data: {
            nameEnter: '',
            userType: '',
            trade: '',
            product: '',
            mainType: '',
            assistType: '',

            fList: [],
            sList: [],
            TList: [],
            chooseF: '',
            chooseS: '',
            nameF: '',
            nameS: '',
            nameT: '',
            allList: [],
        },
        mounted:function(){
            get_ajax("/sys/storeCommodityType/getAllList", {}, function (data) {
                app.allList = data;
            })
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("/sys/store/view", {id: storeId}, function (data) {
                that.nameEnter = data.name;
                $('.js-personType').find('option').each(function () {
                    if (data.userType == $(this).html()) {
                        $(this).prop('selected', true);
                        layui.use(['form'], function () {
                            var form = layui.form;
                            form.render("select");
                            return
                        })
                    }
                })
                $('.js-trade').find('input').each(function () {
                    if (data.trade.indexOf($(this).attr('title')) > -1) {
                        $(this).prop('checked', true)
                    }
                    layui.use(['form'], function () {
                        var form = layui.form;
                        form.render("checkbox");
                    })
                })
                var arrProduct = data.product.split(',');
                $('.js-product').find('input').each(function (i) {
                    console.log(i)
                    $(this).val(arrProduct[i]);
                })
                var mainType = data.mainType.split(',');
                mainType.forEach(function(item){
                    console.log(item);
                    var $el = '<div class="show-namesty"><span>'+item+'</span><span class="icon_close js-delMainpro1 del-sty1"></span></div>';
                    $('.js-mainType1').append($el)
                })
                var assistType = data.assistType.split(',');
                assistType.forEach(function(item){
                    console.log(item);
                    var $el = '<div class="show-namesty"><span>'+item+'</span><span class="icon_close js-delMainpro1 del-sty1"></span></div>';
                    $('.js-mainType2').append($el)
                })

            })


        },
        methods:{
            getSList:function(index,name){
                this.nameF = name;
                this.sList = this.allList[index].subordinate;
                this.TList = [];
            },
            getTList:function(index,name){
                this.TList = this.sList[index].subordinate;
                this.nameS = name;
            },
        }
    })


    $('.js-submit').click(function () {
        postData.name = app.nameEnter;
        postData.userType = $('.js-personType').find('option:selected').html();

        var tradeArr = [];
        $('.js-trade').find('.layui-form-checkbox').each(function () {
            if ($(this).hasClass('layui-form-checked')) {
                console.log(postData.trade);
                tradeArr.push($(this).find('span').html());
            }
        })
        postData.trade = String(tradeArr);
        var productArr = [];
        $('.js-product').find('input').each(function () {
            productArr.push($(this).val());
        })
        postData.product = String(productArr);

        var mainTypeArr = [];
        $('.js-mainType1').find('.show-namesty span:first-child').each(function () {
            mainTypeArr.push($(this).html());
        })
        postData.mainType = String(mainTypeArr);

        var assistTypeArr = [];
        $('.js-mainType2').find('.show-namesty span:first-child').each(function () {
            assistTypeArr.push($(this).html());
        })
        postData.assistType = String(assistTypeArr);
        get_ajax("/sys/store/addInfo", postData, function (data) {
            layer.msg('提交成功！');
            get_ajax("/web/auth/info", {}, function (data) {
                if (data.storeId) {
                    localStorage.setItem("storeId", data.storeId);
                }
            })
        })
    })


    $(document).on('click', '.js-allChange', function () {
        typeMain = $(this).attr('data-type');
        $('.changetype-modal').removeClass('hide');
    })
    $(document).on('click', '.hide-mode', function () {
        $('.changetype-modal').addClass('hide');
    })


</script>
</body>
</html>